<template>
  <div class="w-100 h-100 yszhlyl-box" style="overflow-x: auto">
    <div id="yszhlyl" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";
import {useFunc} from "@/hook/useFunc";

const colorSingleList = ["rgba(184, 235, 143, 1)"];
const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.yxjk.yszhlyl[props.selectValue];
  } catch (error) {}
  return data;
});
let myChart: any;

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [{ data: val }],
      });
    }
  }
);

onMounted(() => {
  let option: any = {
    color: colorSingleList,
    tooltip: {
      trigger: "axis",     
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",

        textStyle: {
          color: "white",
          fontSize: 20,
        },
    },
    dataZoom: [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                start: 0,
                end: 60,
                bottom: "15%",
            }
        ],
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      top: "10%",
      containLabel: true,
    },
    //你的代码
    xAxis: {
      type: "category",
      data: useOptions().paishuiList.map((item: any) => item.label),
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      axisLabel: {
        interval: "auto", // 自动计算间隔
        minInterval: 1, // 设置最小间隔为1
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: [
      {
        name: "%",
        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
          formatter: "{value}" + "",
        },
        splitLine: {
          // 配置分割线
          show: true,
          lineStyle: {
            color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
            type: "solid", // 实线
          },
        },
      },
    ],
    series: [
      {
        name: "",
        type: "line",
        data: [],
        color: "rgba(3, 230, 254, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 0.3,
                color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
    ],
  };

  myChart = echarts.init(document.getElementById("yszhlyl") as HTMLElement);
  myChart.setOption(option);

  const scrollContainer = document.querySelector(".yszhlyl-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
});
</script>

<style></style>
